<template>
  <div class="smenu-container">
    <a-menu v-model="menuSelected" :open-keys.sync="openKeys" mode="inline"
      :style="{ height: '100%', borderRight: 0 }">
      <template v-for="item in smenus">
        <a-menu-item v-if="!item.children" :key="item.path">
          <a-icon :type="item.meta.icon" />
          <span>{{ item.meta.title }}</span>
        </a-menu-item>
        <sub-menu v-else :key="item.path" :menu-info="item" />
      </template>
    </a-menu>
  </div>
</template>

<script>

import { Menu } from 'ant-design-vue'
const SubMenu = {
  template: `
      <a-sub-menu :key="menuInfo.path" v-bind="$props" v-on="$listeners">
        <span slot="title">
          <a-icon :type="menuInfo.meta.icon" /><span>{{ menuInfo.meta.title }}{{ menuInfo.path}}</span>
        </span>
        <template v-for="item in menuInfo.children">
          <a-menu-item v-if="!item.children" :key="item.path"  @click="$router.push({name:item.name})">
            <a-icon :type="item.meta.icon"/>
            <span>{{ item.meta.title }}{{item.path}}</span>
          </a-menu-item>
          <sub-menu v-else :key="item.path" :menu-info="item" />
        </template>
      </a-sub-menu>
    `,
  name: 'SubMenu',
  // must add isSubMenu: true
  isSubMenu: true,
  props: {
    ...Menu.SubMenu.props,
    // Cannot overlap with properties within Menu.SubMenu.props
    menuInfo: {
      type: Object,
      default: () => ({})
    }

  }
}
export default {
  components: {
    'sub-menu': SubMenu
  },
  props: {
    menus: {
      type: Array
    },
    selectedKeys: {
      type: Array
    },
    pathList: {
      type: Array
    }
  },
  data () {
    return {
      smenus: [],
      menuSelected: [],
      openKeys: []
    }
  },
  watch: {
    selectedKeys: {
      handler (newVal, oldVal) {
        this.selectedKeys = newVal
        this.smenus = this.menus[Number(this.selectedKeys[0])].children
        this.openKeys = Array(this.smenus[0].path)
        this.menuSelected = Array(this.smenus[0].children[0].path)
      },
      deep: true
    }
  },
  methods: {
    hasChildren (e) {
      if (e.children && e.children.length > 0) {
        return true
      } else {
        return false
      }
    },
    printMenu (data) {
      for (let index = 0; index < data.length; index++) {
        if (this.hasChildren(data[index])) {
          console.log('has==' + data[index].name)
          this.printMenu(data[index].children)
        } else {
          console.log('hasno==' + data[index].name)
        }
      }
    }
  },
  mounted () {
    this.smenus = this.menus[Number(this.selectedKeys[0])].children
    this.openKeys = Array(this.pathList[2])
    this.menuSelected = Array(this.pathList[3])
  },
  created () {

  }
}
</script>
<style lang="less" >
.smenu-container {
  width: 280px;
}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: rgba(0, 116, 74, 0.1) !important;
}
</style>
